<template>
    <div style="background: #f2f3f5;">
        <div class="banner">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
                        <img :src="item.picUrl">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="content">
            <p>商品列表</p>
            <div class="goods">
                <div class="item" @click="goDetail(item.id)" v-for="item in goodsList" :key="item.id">
                    <img :src="item.pic">
                    <div class="box">
                        <p class="title">{{item.name}}</p>
                        <div class="price">
                            <div class="prices">
                                <span class="current_dollar">￥</span><span
                                    class="current_price">{{item.minPrice}}</span>
                                <del>￥</del><del>{{item.originalPrice}}</del>
                            </div>
                            <button>购买</button>
                        </div>
                    </div>
                    <div class="position" v-if="item.recommendStatus == 1">推荐</div>
                </div>
            </div>
        </div>
        <p class="more">没有更多了~</p>
    </div>
</template>

<script>
import Swiper from "swiper/bundle"
import "swiper/css/bundle"
export default {
    data() {
        return {
            bannerList: [],
            goodsList: [],
            currentIndex: 0
        }
    },
    methods: {
        // 获取轮播图数据
        getBanner() {
            this.request({
                method: "get",
                url: "/banner/list",
                data: {
                    type: "indexBanner"
                }
            }).then(res => {
                this.bannerList = res.data;
                this.$nextTick(() => {
                    new Swiper(".mySwiper", {
                        slidesPerView: 1,
                        spaceBetween: 30,
                        loop: true,
                        autoplay: true,
                        pagination: {
                            el: ".swiper-pagination",
                            clickable: true,
                        }
                    });
                })
            })
        },
        // 获取商品数据
        getGoods() {
            this.request({
                method: "post",
                url: "/shop/goods/list/v2",
            }).then(res => {
                this.goodsList = res.data.result
            })
        },
        // 跳转商品详情
        goDetail(id) {
            this.request({
                method: "get",
                url: "/shop/goods/detail",
                params: {
                    id: id
                }
            }).then(res => {
                console.log(res)
                // this.$router.push("/detail")
                this.$router.push("/detail?id="+id)
                // window.localStorage.setItem("id", id)
            })
        }
    },
    mounted() {
        this.getBanner()
        this.getGoods()
    }
}
</script>

<style scoped>
html,
body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
}

.banner {
    width: 15rem;
    height: 7.2rem;
    margin-bottom: .4rem;
}

.content {
    width: 15rem;
}

.content>p {
    font-size: .64rem;
    font-weight: 700;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    background: white;
}

.content>p::before {
    content: "//////";
    font-weight: 300;
    font-size: .32rem;
    margin-right: .4rem;
}

.content>p::after {
    content: "//////";
    font-weight: 300;
    font-size: .32rem;
    margin-left: .4rem;
}

.goods {
    width: 15rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around
}

.goods .item {
    width: 6.9rem;
    margin-bottom: .48rem;
    position: relative;
}

.goods .item .position {
    position: absolute;
    /* width: ; */
    background: red;
    color: white;
    font-size: .4rem;
    top: .6rem;
    border-radius: 0 .32rem .32rem 0;
    padding: .08rem .16rem;
    padding-right: .24rem;
    left: 0;
}

.box {
    padding: .2rem .4rem;
    background: white;
}

.goods .item img {
    width: 6.9rem;
    height: 6.9rem;
    border-radius: .3rem .3rem 0 0;
}

.goods .item .title {
    font-size: .56rem;
    height: 1.44rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price {
    display: flex;
    justify-content: space-between;
    margin-top: .1rem;
}

.current_dollar {
    font-size: .48rem;
    color: #1ba784;
}

.current_price {
    font-size: .72rem;
    color: #1ba784;
}

del {
    font-size: .48rem;
    color: #969799;
}

.price button {
    background: white;
    width: 1.8rem;
    height: .96rem;
    outline: none;
    font-size: .48rem;
    border-radius: .1rem;
    color: #1ba784;
    border: 1px solid #1ba784;
}

.more {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    color: #ebedf0;
    font-size: .56rem;
    color: #969799;
}
</style>